<template>
  <div>
     <div>
        {{obj.a}} <button @click="obj.a++">a+</button>
     </div>
     <div>
        {{obj.b}} <button @click="obj.b++">a+</button>
     </div>
     <div>
        {{obj.c}} <button @click="obj.c++">a+</button>
     </div>
  </div>
</template>

<script>
/* 
  watch:{
    '对象名.属性名'(newval,oldval){
    }
  }
*/
export default {
  data(){
    return{
      obj:{
        a:10,
        b:20,
        c:30
      }
    }
  },
  computed:{
    //新定义一个计算属性newObj,该计算属性的作用是将data对象中的obj做一个深拷贝
    newObj(){
      //这种深拷贝对于如果一个对象中有函数，获知时间类型是无法进行深拷贝
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch:{
    //obj:要监听的对象
    newObj:{
      //执行监听的具体钩子函数
      handler(newval,oldval){
        console.log(newval,oldval);
      },
      //开启深度监听
      deep:true,
      //开启立即监听
      immediate:true
    }
  }
}
</script>

<style>

</style>